Design Valid and Invalid Register Form By Using Html and Css and bootstrap

Posted By Bajarangi soft , Posted On 29-09-2020

How to design a valid and invalid register form by using html and css and bootstrap .by using html will give content to the form and css will give a styles to the page and finally using bootstrap to get a perfect form.we created just using html and css and bootstrap.

First Need to Create HTML File
1.Add the HTML5 Doctype

<!DOCTYPE html>
<head>
    <title>register form</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>

2.You Need to Add this link Inside HTML file

3.Create HTML File
register.html

<body>
<div class="container">
    <div class="row">
        <div class="register-box"><br>
            <img src="logo2.jpg" class="avatar">
            <br>
            <h1><i><b>REGISTER HERE</b></i></h1>

            <div class="bs-example">
                <form action="/examples/actions/confirmation.php" class="needs-validation" method="post" novalidate>

                    <div class="form-group">
                        <br>
                        <label for="inputEmail">User Name</label>
                        <i class="fa fa-user icon"></i>
                        <input type="name" class="form-control" id="inputname" placeholder="Enter your name" required>
                        <div class="invalid-feedback">Please enter your name</div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Email</label>
                        <i class="fa fa-envelope icon"></i>
                        <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
                        <div class="invalid-feedback">Please enter a valid email address.</div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword">Password</label>
                        <i class="fa fa-lock icon"></i>
                        <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
                        <div class="invalid-feedback">Please enter your password to continue.</div>


                        <div class="form-group">
                            <label for="inputEmail">Confirm password</label>
                            <i class="fa fa-lock icon"></i>
                            <input type="password" class="form-control" id="input password" placeholder="confirm password" required>
                            <div class="invalid-feedback">Please confirm your password</div>
                        </div>


                        <div class="form-group">
                            <label class="form-check-label"><input type="checkbox"> Remember me</label>
                        </div>
                        <button type="submit" class="btn btn-primary">Sign in</button>
                </form>

                <!-- JavaScript for disabling form submissions if there are invalid fields -->
                <script>
                    // Self-executing function
                    (function() {
                        'use strict';
                        window.addEventListener('load', function() {
                            // Fetch all the forms we want to apply custom Bootstrap validation styles to
                            var forms = document.getElementsByClassName('needs-validation');
                            // Loop over them and prevent submission
                            var validation = Array.prototype.filter.call(forms, function(form) {
                                form.addEventListener('submit', function(event) {
                                    if (form.checkValidity() === false) {
                                        event.preventDefault();
                                        event.stopPropagation();
                                    }
                                    form.classList.add('was-validated');
                                }, false);
                            });
                        }, false);
                    })();
                </script>
            </div>
        </div>
    </div>
</body>

4.Create a Css file ,Inside your Css Folder
style.css

body{
    margin:0;
    padding:0;
    font-family:sans-serif;
    background-image:url("S2.jpg");
    background-size:cover;
}
.register-box{
    width:430px;
    color:white;
    top:20%;
    left:40%;
    position:absolute;
    transfrom:translate(-50%,50%);
    border:1px solid #f3f2f2;
    padding:34px;
    margin-top:-85px;
    margin-left:-50px;

    height:727px;
}
.register-box h1{
    float:left;
    font-size:30px;
    border-bottom:2px solid #f3f6f0;
    margin-bottom:5px;
    padding:10px 25px;
    color: #f5ebeb;
    margin-top:-13px;
    margin-left: 45px;

}
.form-group {
    width: 100%;
    overflow: hidden;
    font-size: 20px;

    margin: 8px 0;

}
.form-group i{
    width:26px;
    float:left;
    text-align:center;
    color: #e0dbdb;
    margin-top: 6px;
}

.btn-primary{
    width:40%;
    margin-top:-43;
    margin-left:102px;
}
.avatar{
    width:100px;
    height:100px;
    border-radius:50%;
    position:absolute;
    top: -50px;
    left:calc(48% - 50px);

}

5.Complete code of HTML File

<!DOCTYPE html>
<head>
    <title>register form</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="register-box"><br>
            <img src="logo2.jpg" class="avatar">
            <br>
            <h1><i><b>REGISTER HERE</b></i></h1>

            <div class="bs-example">
                <form action="/examples/actions/confirmation.php" class="needs-validation" method="post" novalidate>

                    <div class="form-group">
                        <br>
                        <label for="inputEmail">User Name</label>
                        <i class="fa fa-user icon"></i>
                        <input type="name" class="form-control" id="inputname" placeholder="Enter your name" required>
                        <div class="invalid-feedback">Please enter your name</div>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Email</label>
                        <i class="fa fa-envelope icon"></i>
                        <input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
                        <div class="invalid-feedback">Please enter a valid email address.</div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword">Password</label>
                        <i class="fa fa-lock icon"></i>
                        <input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
                        <div class="invalid-feedback">Please enter your password to continue.</div>


                        <div class="form-group">
                            <label for="inputEmail">Confirm password</label>
                            <i class="fa fa-lock icon"></i>
                            <input type="password" class="form-control" id="input password" placeholder="confirm password" required>
                            <div class="invalid-feedback">Please confirm your password</div>
                        </div>


                        <div class="form-group">
                            <label class="form-check-label"><input type="checkbox"> Remember me</label>
                        </div>
                        <button type="submit" class="btn btn-primary">Sign in</button>
                </form>

                <!-- JavaScript for disabling form submissions if there are invalid fields -->
                <script>
                    // Self-executing function
                    (function() {
                        'use strict';
                        window.addEventListener('load', function() {
                            // Fetch all the forms we want to apply custom Bootstrap validation styles to
                            var forms = document.getElementsByClassName('needs-validation');
                            // Loop over them and prevent submission
                            var validation = Array.prototype.filter.call(forms, function(form) {
                                form.addEventListener('submit', function(event) {
                                    if (form.checkValidity() === false) {
                                        event.preventDefault();
                                        event.stopPropagation();
                                    }
                                    form.classList.add('was-validated');
                                }, false);
                            });
                        }, false);
                    })();
                </script>
            </div>
        </div>
    </div>
</body>
</html>

Related Post

How To Create Register Form Using Html ,Bootstarp And Css
How To Design Flutter Login And Register Screens UI Example
Create A Simple Register Form With Flutter Using Android
How to crerate a Register form easily by using Html,Css and Bootstrap
how to create a register form using css and html and bootstrap
How Can I Create Register Form By Using Html and Css and Bootstrap
How To Create a Register From Just by Using Html and Css and Bootstrap
How To Design a Register Form Easily By Using Html and Css and Bootstrap
Design Valid and Invalid Register Form By Using Html and Css and bootstrap
How To Add From Validation Using Flutter Android App